<template>
	<div id="app">
		<transition :name="name">
			<router-view class="child-view"></router-view>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: 'slide-left' // 默认动态路由变化为slide-right
			}
		},
		methods: {

		}
	}
</script>

<style>
	body,a,p,li,dl,dd,ul,h1,h2,h3,h4,h5,strong,div,img {
		font-size: 0.14rem;
		font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
		margin: 0;
		padding: 0;
		border: none;
		text-decoration: none;
	}
	body{max-width:640px; margin:0 auto;}
   .wrap{max-width: 640px; margin: 0 auto;}
	header{position: fixed; top:0; z-index: 99; max-width: 640px; }
	footer{position: fixed; bottom:0; z-index: 99; max-width: 640px; }
	.main{padding-top: 0.44rem; padding-bottom: 0.45rem; width:100%;}
	.top{width:100%; max-width: 640px; height: 0.44rem; background: #3297fd; line-height: 0.44rem; position: fixed; top: 0; z-index:9;}
	.top .back{position: absolute; left: 0.1rem; color: #fff; top:0;}
	.top .save{position: absolute; right: 0.1rem; color: #fff; top:0;}
	.top h1{color:#fff; text-align: center; font-size: 0.15rem;}
	ul,li {
		list-style: none;
	}
	#app {
		height: 100%;
	}
	body {
		height: 100%;overflow-x: hidden !important; background: #e8eaec;
	}
	html {
		height: 100%;
	}
	
	/* 路由切换动画 */
	.child-view {
		width: 100%;
		height: 100%;
		-webkit-transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
		transition: all .5s cubic-bezier(.55, 0, .1, 1);
	}
	.slide-right-enter-active,
	.slide-right-leave-active,
	.slide-left-enter-active,
	.slide-left-leave-active {
		will-change: transform;
		transition: all 0.5s;
		height: 100%;
		position: absolute;
		backface-visibility: hidden;
		perspective: 1000;
	}
	.slide-right-enter {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
	.slide-right-leave-active {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	.slide-left-enter {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	.slide-left-leave-active {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
</style>